import * as React from 'react';

import {IView} from '../../types/IView';
import {IAttr} from '../../types/IAttr';

import AttributePaneItem from './AttributePaneItem';

import './AttributePane.css';

export interface StylePaneItemProps {
  designId: string;
  selectedView: IView;
  target: 'style' | 'hoverStyle';
  attribute: IAttr;
}

export interface StylePaneItemState {
  isCollapsed: boolean;
}

class StylePaneItem extends React.Component<StylePaneItemProps, StylePaneItemState> {

  constructor(props: StylePaneItemProps) {
    super(props);

    this.state = {
      isCollapsed: true
    };
  }

  render() {
    const {attribute} = this.props;

    if (!attribute.details) {
      return this.renderSimpleStyle(attribute);
    }

    return this.renderComplexStyle(attribute);
  }

  private renderSimpleStyle(style: IAttr) {
    const {designId, selectedView, target} = this.props;
    return (
      <AttributePaneItem designId={designId} attribute={style} selectedView={selectedView} target={target}/>
    );
  }

  private renderComplexStyle(style: IAttr) {
    const {designId, selectedView, target} = this.props;

    const stateClass = `Attribute-item-wrapper ${this.state.isCollapsed ? 'collapsed' : ''}`;
    return (
      <div className={stateClass}>
        <AttributePaneItem designId={designId} attribute={style} selectedView={selectedView} target={target}
                           collapsible={true} toggleCollapse={this.toggleCollapse}/>
        <div className="Attribute-item-details">
          {style.details.map(detail => this.renderDetailStyle(detail))}
        </div>
      </div>
    );
  }

  private renderDetailStyle(style: IAttr) {
    const {designId, selectedView, target} = this.props;
    return (
      <StylePaneItem key={style.name} designId={designId} selectedView={selectedView} target={target}
                     attribute={style}/>
    );
  }

  private toggleCollapse = () => {
    this.setState({...this.state, isCollapsed: !this.state.isCollapsed});
  }
}

export default StylePaneItem;
